<template>
<section class="b_live clearfix">
  <div class="gg-floor-module">
    <div class="item">
      <div class="lazy-img">
        <img src="https://i0.hdslb.com/bfs/archive/04d584c237152acb0c9cd8809baf03b08c63ecb0.jpg@1160w_96h.webp"/>
      </div>
    </div>
  </div>
  <div class="l-con">
    <section class="zone-title">
      <div class="headline clearfix">
        <i class="icon icon_t icon-live"></i>
        <a class="name" target="_blank">正在直播</a>
        <p class="online">当前共有<span>1222</span>个在线直播</p>
        <a class="fire" target="_blank">
          <i class="icon pmt-icon"></i>
          233秒居然能做这些！
        </a>
        <a class="link-more" target="_blank">更多<i class="icon"></i></a>
        <a class="read-push">
          <i class="icon icon_read"></i>
          <span class="info">
            <b>223</b>条新动态
          </span>
        </a>
      </div>
    </section>
    <section class="storey-box clearfix">
      <div class="card-live-module">
        <a target="_blank" href="">
          <div class="pic">
            <div class="lazy-img">
              <img alt="绝地求生：社会我奈哥，人苟屁话多。" src="//i0.hdslb.com/group1/M00/09/FB/oYYBAFZ83wiAaLTDAAEpmlJAPsQ571.jpg"/>
            </div>
            <span class="type">单机联机</span>
            <div class="mask">
              <div class="lazy-img face">
                <img src="//i1.hdslb.com/bfs/face/80b2a1e666160d9a1fed82c643885e182d21a82f.jpg@96w_96h.webp"/>
              </div>
              <span class="onair">
                <i></i>
                Live
              </span>
            </div>
          </div>
          <p class="text" title="绝地求生：社会我奈哥，人苟屁话多。">绝地求生：社会我奈哥，人苟屁话多。</p>
          <p class="num">
            <span class="auther">
              <i class="icon"></i>
              奈さま
            </span>
            <span class="online">
              <i class="icon"></i>
              8141
            </span>
          </p>
        </a>
      </div>
    </section>
  </div>
  <div class="r-con">
    <BLiveTab></BLiveTab>
  </div>
</section>
</template>

<script>
import BLiveTab from '@/components/live/BLiveTab';
export default {
  name: 'b_promote',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    };
  },
  components: {
    BLiveTab
  }
};
</script>

<style lang="stylus">
.lazy-img
  width 100%
  height 100%
  display inline-block
  background: url(../../../static/images/img_loading.a351656.png) 50% no-repeat;
  img
    width 100%
    height 100%
    display block
.icon
  display inline-block
  background-image url(../../../static/images/icons.d895b84.png)
.card-live-module
  position relative
  width 160px
  height 148px
  font-size 12px
  overflow hidden
  .pic
    position relative
    width 160px
    height 100px
    display block
    overflow hidden
    text-align center
    border-radius 4px
    .type
      position absolute
      bottom 0
      right 0
      color #fff
      height 12px
      line-height 12px
      padding 3px 5px
      background rgba(0,0,0,.5)
      border-radius 4px 0 0
      transition opacity .3s
    .mask
      position absolute
      top 0
      left 0
      width 100%
      height 100%
      background rgba(0,0,0,.5)
      border-radius 4px
      transition opacity .3s
      opacity 0
      .face
        position absolute
        top 26px
        left 24px

        width 48px
        height 48px
        border-radius 50%
        img
          border-radius 50%
      .onair
        position absolute
        left 88px
        top 40%
        height 20px
        line-height 20px
        width 48px
        border-radius 20px
        background-color #00a1d6
        color #fff
        i
          display inline-block
          width 6px
          height 6px
          border-radius 3px
          background-color #fff
          margin -1px 4px 0 0
          vertical-align middle
  .text
    padding-top 8px
    height 40px
    line-height 20px
    transition all .2 linear
    color #222
    word-wrap break-word
    word-break break-all
    overflow hidden
    text-align left
  .num
    position absolute
    width 100%
    bottom 0
    height 20px
    line-height 20px
    color #99a2aa
    background-color #fff
    transition all .3s
    font-size 0
    opacity 1
    span
      line-height 12px
      height 14px
      display inline-block
      width 50%
      overflow hidden
      font-size 12px
      vertical-align bottom
      font-weight 600
    i
      display inline-block
      width 12px
      height 12px
      vertical-align top
      margin-right 5px
    .auther
      white-space nowrap
      text-overflow ellipsis
      .icon
        background-position -282px -154px
    .online
      .icon
        margin-left 5px
        background url(../../assets/images/live-eye.png) no-repeat
// .b_live
.zone-title
  padding-right 20px
  .headline
    padding 0 0 15px
    .icon_t
      width 40px
      height 40px
      margin-right 10px
      vertical-align middle
      float left
      margin-top -10px
    .icon-live
      background-position -141px -652px
    .name
      font-size 24px
      line-height 24px
      font-weight 400
      margin-right 20px
      float left
      color #222
      &:hover
        color #00a1d6
    .online
      float left
      margin-top 8px
      color #99a2aa
      span
        color #00a1d6
    .fire
      margin-top 8px
      margin-left 40px
      padding-right 10px
      color #6d757a
      float left
      &:hover
        color #00a1d6
      .pmt-icon
        display inline-block
        vertical-align top
        background-position -665px -1113px
        width 14px
        height 14px
        margin-top -2px

    .link-more
      float right
      width 52px
      height 22px
      line-height 22px
      background-color #fff
      border 1px solid #ccd0d7
      color #555
      border-radius 4px
      text-align center
      margin 0 0 0 10px
      transition all .2s
      &:hover
        background-color #ccd0d7
        .icon
            margin-left 6px
      .icon
        display inline-block
        background-position -478px -218px
        width 6px
        height 12px
        margin -2px 0 0
        vertical-align middle
        transition all .2s
    .read-push
      float right
      cursor pointer
      background-color #fff
      border 1px solid #ccd0d7
      border-radius 4px
      height 22px
      padding 0 10px
      transition all .2s
      &:hover
        background-color #ccd0d7
        .icon_read
          transform rotate(450deg)
      .icon_read
        display inline-block
        width 12px
        height 13px
        vertical-align top
        margin-top 5px
        background-position -475px -89px
        transition all .5s
      .info
        display inline-block
        vertical-align top
        line-height 22px
        margin-left 5px
        b
          font-weight 700
          color #222
.storey-box
  height 336px
  overflow hidden
  .card-live-module
    float left
    margin 0 20px 20px 0
    &:hover 
      .mask
        opacity 1
      .type
        opacity 0
      .text
        color #00a1d6
      .num
        opacity 0
        height 0

.bili-wrapper
  .l-con
    float left
    width 900px
  .r-con
    float right
    width 260px
.gg-floor-module
  position relative
  width 1160px
  overflow hidden
  border-radius 5px
  max-height 96px
  margin 0 auto 20px
  img
    border-radius 5px
    
@media screen and (max-width: 1400px)
  .gg-floor-module
      width 980px
      max-height 80px

@media screen and (max-width: 1400px)
  .bili-wrapper
    .l-con
      width 720px
</style>
